<!---->
<template>
    <div class="page_recommend">
        <headerT title="商城" />
        <div class="pagesMain" style="height: 91vh;">
            <div class="pageContent" style="overflow:hidden">
                <div class="leftNav">
                    <div class="navTap" v-for="(item,index) in nineAreaLists" @click="gettrade(index)"
                         :class="item.isSelect ?  'chooseItem' : ''">{{item.area_name}}
                    </div>
                </div>
                <div class="rightBlock">
                    <div v-if="nineAreaLists.length" class="commonArea">{{nineAreaLists[freshIndex].area_name}}</div>
                    <div class="goodsList">
                        <div class="goodsItem comBorderBottom" v-for="(item,index) in goodsList" :keys="item.id">
                            <div class="translateBlock">
                                <img :src="item.good_img.length ? item.good_img[0].img_url :
                                '../../../static/images/lishi.png'"
                                     class="goodsPic"
                                     alt=""/>
                            </div>
                            <div class="translateBlock goodsInfo">
                                <div class="goodsName moreTextEllipsis">
                                    {{item.goods_name}}
                                </div>
                                <div class="translateBlock">
                                    <div class="price">
                                        <div class="discount translateBlock mainColor">
                                            <span>¥</span>
                                            <span></span>
                                            <span v-if="item.good_marketing && item.good_marketing.promotion_price">
                                                {{item.good_marketing.promotion_price}}
                                            </span>
                                            <span v-else>
                                                <span v-if="item.good_specification.length">
                                                    {{item.good_specification[0].price}}
                                                </span>
                                            </span>
                                        </div>
                                        <div class="originalPrice translateBlock">
                                            <span v-if="item.good_specification.length">
                                                ¥{{item.good_specification[0].original_price}}
                                            </span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <tabcard></tabcard>
    </div>
</template>

<script>
    import Vue from 'vue'
    import dashboard from '@/components/dashboard'
    import tabcard from '@/components/tabCard'
    import {nineAreaList} from '../../services/home'
    import {goodsList} from '../../services/goods'
    export default {
        name: "recommend",
        components: {
            dashboard,
            tabcard
        },

        data() {
            return {
                nineAreaLists: [],   // 主城九区
                goodsList: [],   // 商品列表
                longitude: '106.57',     // 经度
                dimensionality: '29.55',  // 纬度
                type:2,    // todo type值有变化
                freshIndex: this.$store.state.user.nineListIndex,
            }
        },

        created() {

        },

        mounted() {
            this.getNineAreaList()
        },
        watch: {},
        methods: {
            // 获取地区列表
            getNineAreaList() {
                this.$post(nineAreaList, {}).then(res => {
                    this.nineAreaLists = res.data;
                    this.nineAreaLists.forEach(item => {
                        Vue.set(item, 'isSelect', false)
                    })
                    this.nineAreaLists[this.freshIndex].isSelect = true;
                    this.gettrade(this.freshIndex)
                })
            },

            //获得商品
            gettrade(index) {
                this.nineAreaLists.forEach(item => {
                    item.isSelect = false;
                })
                this.nineAreaLists[index].isSelect = true;
                this.freshIndex = index;
                this.$store.dispatch('changeNineListIndex', index);
                let param = {
                    areas_id: this.nineAreaLists[index].id,
                    type: this.type,
                    longitude: this.longitude,
                    dimensionality: this.dimensionality,
                }
                this.$post(goodsList, param).then(res => {
                    this.goodsList = res.data.data;
                })

            },

        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
.page_recommend{
    .pageContent {
        margin-top: -7rem;
        background-color: #fff;

        .leftNav {
            width: 2rem;
            height: 14rem;
            float: left;
            overflow-y: auto;
            background: #f8f8f8;
            border-top: solid 1px #f8f8f8;
            border-right: solid 1px #f8f8f8;

            .navTap {
                width: 2rem;
                height: 1.28rem;
                line-height: 1.28rem;
                text-align: center;
                border-top: solid 1px #f8f8f8;
                border-bottom: solid 1px #f8f8f8;
                background: rgb(247, 247, 247);
            }

            .chooseItem {
                font-weight: bold;
                background-color: #fff;
            }
        }


        .rightBlock {
            max-height: 14rem;
            overflow-y: auto;

            .goodsList {
                .goodsItem {
                    margin-bottom: 0.3rem;
                    padding-bottom: 0.1rem;

                    .goodsPic {
                        width: 2.88rem;
                        padding-left: .2rem;
                    }

                    .goodsInfo {
                        width: 4.45rem;
                        height: 1.98rem;
                        vertical-align: top;
                        font-size: .34rem;
                        color: #4e4e4e;
                        margin-left: 0.3rem;
                    }

                    .goodsName {
                        -webkit-line-clamp: 2
                    }

                    .sales {
                        color: #9F9F9F;
                        font-size: .3rem;
                    }

                    .discount {
                        font-size: .44rem;
                        margin-right: .17rem;
                    }

                    .originalPrice {
                        color: #9F9F9F;
                        font-size: .25rem;
                        text-decoration: line-through;
                    }

                    .btnBlock {
                        width: 2.6rem;
                        text-align: -webkit-right;
                    }

                    .btnBuy {
                        width: 1.65rem;
                    }
                }

                .goodsItem:first-child {
                    padding-top: 0.3rem;
                }
            }
        }
    }
}
</style>
